Next.js statikus exportok: Kizárólag kliensoldali alkalmazások készítése

A Next.js egy erőteljes React keretrendszer, amely lehetővé teszi a fejlesztők számára, hogy teljesítményorientált, skálázható és SEO-barát webalkalmazásokat készítsenek. Bár a Next.js híres a szerveroldali renderelési (SSR) és statikus oldalgenerálási (SSG) képességeiről, rugalmasságot is kínál kizárólag kliensoldali alkalmazások létrehozásához statikus exportok használatával. Ez a megközelítés lehetővé teszi, hogy kihasználja a Next.js eszközeinek és struktúrájának előnyeit, miközben egy tisztán kliensoldali alkalmazást telepít. Ez a bejegyzés végigvezeti Önt mindenen, amit a Next.js statikus exportokkal készülő kliensoldali alkalmazásokról tudni kell, beleértve az előnyöket, korlátokat, a beállítási folyamatot és a haladó technikákat.

Mik azok a Next.js statikus exportok?

A Next.js statikus exportjai azt a folyamatot jelentik, amely során az alkalmazás egy teljesen statikus verziója jön létre a build folyamat során. Ez azt jelenti, hogy az összes HTML, CSS és JavaScript fájl előre renderelt és készen áll a közvetlen kiszolgálásra egy statikus fájlszerverről (pl. Netlify, Vercel, AWS S3 vagy egy hagyományos webszerver). A szerveroldalon renderelt alkalmazásokkal ellentétben itt nincs szükség Node.js szerverre a bejövő kérések kezeléséhez. Ehelyett a teljes alkalmazás statikus eszközök gyűjteményeként kerül kézbesítésre.

Amikor egy kizárólag kliensoldali alkalmazást célozunk meg, a Next.js ezeket a statikus eszközöket azzal a feltételezéssel generálja, hogy minden dinamikus viselkedést a kliensoldali JavaScript fog kezelni. Ez különösen hasznos az egyoldalas alkalmazások (SPA-k) esetében, amelyek elsősorban a kliensoldali útválasztásra, API hívásokra és felhasználói interakciókra támaszkodnak.

Miért válassza a statikus exportokat kliensoldali alkalmazásokhoz?

A kliensoldali alkalmazások Next.js statikus exportokkal történő készítése számos meggyőző előnnyel jár:

• Jobb teljesítmény: A statikus eszközök közvetlenül egy CDN-ről (Content Delivery Network) szolgálhatók ki, ami gyorsabb betöltési időt és jobb felhasználói élményt eredményez. Nincs szükség szerveroldali feldolgozásra, ami csökkenti a késleltetést és javítja a skálázhatóságot.
• Fokozott biztonság: Szerveroldali komponens nélkül az alkalmazás támadási felülete jelentősen csökken. Kevesebb a kihasználható potenciális sebezhetőség, így az alkalmazás biztonságosabbá válik.
• Egyszerűsített telepítés: Egy statikus oldal telepítése általában sokkal egyszerűbb, mint egy szerveroldalon renderelt alkalmazásé. Számos statikus tárhelyszolgáltatót használhat, amelyek közül sok ingyenes vagy megfizethető csomagokat kínál.
• Költséghatékony tárhely: A statikus tárhely általában olcsóbb, mint a szerveralapú tárhely, mivel csak a tárhelyért és a sávszélességért kell fizetni.
• Jobb SEO (megfontolásokkal): Míg a hagyományos kliensoldali alkalmazásoknak SEO kihívásaik vannak, a Next.js statikus exportok ezt enyhítik azáltal, hogy előre renderelik a kezdeti HTML struktúrát. Azonban a nagymértékben kliensoldali renderelésre támaszkodó dinamikus tartalom továbbra is további SEO stratégiákat igényelhet (pl. egy előrenderelési szolgáltatás használata a botok számára).
• Fejlesztői élmény: A Next.js kiváló fejlesztői élményt nyújt olyan funkciókkal, mint a hot module replacement, a fast refresh és a beépített útválasztás, ami megkönnyíti a komplex kliensoldali alkalmazások építését és karbantartását.

A statikus exportok korlátai

Bár a statikus exportok számos előnnyel járnak, fontos tisztában lenni a korlátaikkal:

• Szerveroldali renderelés hiánya: A statikus exportok nem alkalmasak olyan alkalmazásokhoz, amelyek SEO vagy teljesítmény okokból szerveroldali renderelést igényelnek. Minden renderelés a kliensoldalon történik.
• Korlátozott dinamikus tartalom: Azok az alkalmazások, amelyek nagymértékben támaszkodnak szerveroldali adatlekérésre vagy dinamikus tartalomgenerálásra, nem biztos, hogy jól illeszkednek a statikus exportokhoz. Minden adatlekérést és feldolgozást a kliensoldalon kell kezelni.
• SEO megfontolások a dinamikus tartalom esetében: Ahogy korábban említettük, a SEO kihívást jelenthet, ha az alkalmazás tartalma nagymértékben a kliensoldalon generálódik. A keresőmotorok feltérképezői nem biztos, hogy képesek végrehajtani a JavaScriptet és megfelelően indexelni a tartalmat.
• Build idő: Egy statikus oldal generálása tovább tarthat, mint egy szerveroldalon renderelt alkalmazás építése, különösen nagy és komplex projektek esetében.

A Next.js beállítása statikus exportokhoz

Íme egy lépésről lépésre útmutató a Next.js statikus exportokhoz való beállításához:

1. Hozzon létre egy új Next.js projektet

Ha még nincs Next.js projektje, hozzon létre egyet a következő paranccsal:

            npx create-next-app my-client-app
            

              
                Copy
              
            
          

Válassza ki az igényeinek leginkább megfelelő opciókat a beállítási folyamat során (pl. TypeScript, ESLint).

2. Konfigurálja a `next.config.js` fájlt

Nyissa meg a `next.config.js` fájlt a projekt gyökerében, és adja hozzá a következő konfigurációt:

            /** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Opcionális: A `/me` linkeket `/me/`-re változtatja és a `/me.html`-t `/me/index.html`-ként generálja
  // lásd https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig
            

              
                Copy
              
            
          

Az `output: 'export'` opció utasítja a Next.js-t, hogy generáljon egy statikus exportot az alkalmazásáról. A `trailingSlash: true` beállítása általában ajánlott az egységes URL-struktúra biztosítása és a potenciális SEO problémák elkerülése érdekében.

3. Frissítse a `package.json` fájlt

Módosítsa a `package.json` fájl `scripts` szekcióját, hogy tartalmazzon egy build szkriptet a statikus exportokhoz:

            {
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  }
}
            

              
                Copy
              
            
          

Ez a szkript először felépíti a Next.js alkalmazást, majd exportálja azt egy statikus könyvtárba.

4. Implementálja a kliensoldali útválasztást

Mivel egy kliensoldali alkalmazást készít, implementálnia kell a kliensoldali útválasztást a `next/router` modul vagy egy harmadik féltől származó könyvtár, mint például a `react-router-dom` segítségével. Íme egy példa a `next/router` használatával:

            import { useRouter } from 'next/router';
import Link from 'next/link';

function HomePage() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page!</p>
      <button onClick={handleClick}>Go to About Page</button>

      <Link href="/about">
         <a>Go to About Page (using Link)</a>
      </Link>
    </div>
  );
}

export default HomePage;
            

              
                Copy
              
            
          

Ne felejtse el használni a `next/link` `Link` komponensét a belső navigációhoz, hogy biztosítsa a zökkenőmentes kliensoldali átmeneteket.

5. Kezelje az adatlekérést a kliensoldalon

Egy kliensoldali alkalmazásban minden adatlekérést a kliensoldalon kell elvégezni olyan technikákkal, mint a `useEffect` vagy `useState` hook-ok. Például:

            import { useState, useEffect } from 'react';

function DataPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!data) return <p>No data to display</p>;

  return (
    <div>
      <h1>Data Page</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;
            

              
                Copy
              
            
          

6. Építse fel és exportálja az alkalmazást

Futtassa a build szkriptet a statikus export generálásához:

            npm run build
            

              
                Copy
              
            
          

Ez létrehoz egy `out` (vagy `public` a Next.js verziójától függően) könyvtárat, amely tartalmazza az alkalmazás statikus HTML, CSS és JavaScript fájljait.

7. Telepítse a statikus oldalt

Most már telepítheti az `out` könyvtár tartalmát egy statikus tárhelyszolgáltatóhoz, mint például a Netlify, Vercel, AWS S3 vagy a GitHub Pages. A legtöbb szolgáltató egyszerű drag-and-drop telepítést vagy parancssori eszközöket kínál a folyamat automatizálásához.

Haladó technikák kliensoldali Next.js alkalmazásokhoz

Íme néhány haladó technika a kliensoldali Next.js alkalmazások optimalizálásához:

1. Kódfelosztás és lusta betöltés (Lazy Loading)

Használjon dinamikus importokat (`import()`) a kód kisebb darabokra bontásához, amelyek igény szerint töltődnek be. Ez jelentősen javíthatja a kezdeti betöltési időket, különösen nagy alkalmazások esetében.

            import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}
            

              
                Copy
              
            
          

2. Képoptimalizálás

Használja a `next/image` komponenst a képoptimalizáláshoz. Ez a komponens automatikusan optimalizálja a képeket különböző eszközökhöz és képernyőméretekhez, javítva a teljesítményt és a felhasználói élményt. Támogatja a lusta betöltést, a reszponzív képeket és a különböző képformátumokat.

            import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="My Image"
      width={500}
      height={300}
    />
  );
}
            

              
                Copy
              
            
          

3. Service Worker-ek

Implementáljon egy service workert az offline funkcionalitás engedélyezéséhez és a teljesítmény javításához. A service worker egy háttérben futó szkript, amely képes elfogni a hálózati kéréseket, gyorsítótárazni az eszközöket és push értesítéseket küldeni. Olyan könyvtárak, mint a `next-pwa`, egyszerűsíthetik a service worker hozzáadását a Next.js alkalmazásához.

4. Környezeti változók

Használjon környezeti változókat az alkalmazás konfigurálásához különböző környezetekben (pl. fejlesztés, staging, produkció). A Next.js beépített támogatást nyújt a környezeti változókhoz a `.env` fájlon és a `process.env` objektumon keresztül. Ügyeljen arra, hogy ne tegyen közzé érzékeny információkat a kliensoldali kódban. A környezeti változókat elsősorban olyan konfigurációs beállításokhoz használja, amelyek biztonságosan közzétehetők.

5. Monitorozás és analitika

Integráljon egy monitorozási és analitikai szolgáltatást (pl. Google Analytics, Sentry vagy New Relic) a teljesítménymutatók követéséhez, a hibák azonosításához és a felhasználói viselkedés megértéséhez. Ez segít optimalizálni az alkalmazást és idővel javítani a felhasználói élményt.

6. SEO optimalizálás kliensoldali alkalmazásokban

Bár a statikus exportok biztosítanak egy kezdeti HTML struktúrát, vegye fontolóra ezeket a stratégiákat a jobb SEO érdekében a nagymértékben kliensoldali alkalmazásokban:

• Előrenderelési szolgáltatások: Használjon olyan szolgáltatást, mint a prerender.io, hogy teljesen renderelt HTML-t szolgáljon ki a keresőmotor botoknak.
• Dinamikus oldaltérképek: Dinamikusan generálja és frissítse az oldaltérkép XML-t az alkalmazás tartalma alapján.
• Strukturált adatok: Implementáljon strukturált adat jelölést (Schema.org), hogy segítse a keresőmotorokat a tartalom megértésében.
• Meta tagek: Dinamikusan frissítse a meta tageket (cím, leírás stb.) olyan könyvtárakkal, mint a `react-helmet`, az aktuális útvonal és tartalom alapján.
• Tartalomkézbesítés: Győződjön meg róla, hogy a tartalma gyorsan betöltődik, globálisan. Használjon CDN-t. Egy ausztráliai felhasználónak ugyanolyan gyors élményben kell részesülnie, mint egy amerikai felhasználónak.

Nemzetköziesítési (i18n) megfontolások

Amikor egy kliensoldali alkalmazást készít globális közönség számára, a nemzetköziesítés (i18n) kulcsfontosságú. Íme néhány bevált gyakorlat:

• Fordítási fájlok: Tárolja a fordításokat külön fájlokban minden nyelvhez. Használjon olyan könyvtárat, mint az `i18next` vagy a `react-intl` a fordítások kezeléséhez.
• Nyelvi beállítások észlelése: Implementáljon nyelvi beállítások észlelését a felhasználó böngészőbeállításai vagy IP-címe alapján.
• Útválasztás: Használjon URL előtagokat vagy aldoméneket az aktuális nyelv jelzésére (pl. `/en/`, `/fr/`, `en.example.com`, `fr.example.com`). A Next.js a 10-es verzió óta beépített i18n útválasztási támogatással rendelkezik.
• Szám- és dátumformázás: Használjon helyspecifikus szám- és dátumformázást, hogy az adatok helyesen jelenjenek meg a különböző kultúrák számára.
• Jobbról balra (RTL) támogatás: Támogassa a jobbról balra író nyelveket, mint az arab és a héber, CSS logikai tulajdonságok és irányattribútumok használatával.
• Pénznemformázás: Jelenítse meg a pénznemeket a megfelelő szimbólumokkal és formátumokkal a különböző helyi beállításokhoz. Az olyan könyvtárak, mint az `Intl.NumberFormat`, rendkívül hasznosak lehetnek.

A megfelelő megközelítés kiválasztása: Statikus export vs. szerveroldali renderelés

Annak eldöntése, hogy statikus exportot vagy szerveroldali renderelést használjon, az alkalmazás specifikus követelményeitől függ. Vegye figyelembe a következő tényezőket:

• Tartalom típusa: A tartalom elsősorban statikus vagy dinamikus? Ha többnyire statikus, a statikus export jó választás. Ha rendkívül dinamikus és szerveroldali adatlekérést igényel, a szerveroldali renderelés megfelelőbb lehet.
• SEO követelmények: Mennyire fontos a SEO az alkalmazás számára? Ha a SEO kritikus, a szerveroldali renderelés szükséges lehet annak biztosítására, hogy a keresőmotorok feltérképezői megfelelően indexeljék a tartalmat.
• Teljesítménykövetelmények: Milyen teljesítménykövetelményei vannak az alkalmazásnak? A statikus exportok kiváló teljesítményt nyújthatnak a statikus tartalomhoz, míg a szerveroldali renderelés javíthatja a dinamikus tartalom teljesítményét a kliensoldali feldolgozás csökkentésével.
• Bonyolultság: Mennyire bonyolult az alkalmazása? A statikus exportok általában egyszerűbben beállíthatók és telepíthetők, míg a szerveroldali renderelés bonyolultabbá teheti a fejlesztési folyamatot.
• Költségvetés: Mekkora a költségvetése a tárhelyre és az infrastruktúrára? A statikus tárhely általában olcsóbb, mint a szerveralapú tárhely.

Valós példák

Íme néhány valós példa olyan alkalmazásokra, amelyek profitálhatnak a Next.js statikus exportjaiból:

• Landing oldalak: Egyszerű landing oldalak statikus tartalommal és minimális interaktivitással.
• Dokumentációs oldalak: Dokumentációs oldalak előre renderelt tartalommal és kliensoldali keresési funkcionalitással.
• Blogok (CMS-sel): Blogok, ahol a tartalmat egy headless CMS-en keresztül kezelik, és kliensoldalon kérik le.
• Portfóliók: Személyes vagy szakmai portfóliók statikus információkkal és kliensoldali útválasztással.
• E-kereskedelmi termékkatalógusok: Kis- és közepes méretű e-kereskedelmi üzletek, amelyek előre renderelhetik a termékadatokat, ahol a dinamikus kosár- és fizetési folyamatokat a kliensoldalon kezelik.

Példa: Nemzetközi vállalati weboldal

Képzeljen el egy céget, amelynek irodái vannak New Yorkban, Londonban és Tokióban. Szeretnének egy weboldalt, amely angol, francia és japán nyelven elérhető. Egy Next.js statikus export, egy headless CMS-sel és i18n könyvtárakkal kombinálva ideális lehet. A CMS tárolná a lefordított tartalmat, a Next.js lekérné és renderelné azt kliensoldalon, és a statikus oldalt globálisan telepíthetnék egy CDN-re a gyors hozzáférés érdekében.

Következtetés

A Next.js statikus exportjai hatékony módot kínálnak a kizárólag kliensoldali alkalmazások készítésére a Next.js keretrendszer előnyeivel. Az előnyök, korlátok, a beállítási folyamat és a haladó technikák megértésével gyors, biztonságos és globálisan elérhető webes élményeket hozhat létre, amelyek megfelelnek az Ön specifikus követelményeinek. Akár egy egyszerű landing oldalt, akár egy komplex SPA-t készít, a statikus exportok értékes eszközt jelenthetnek a webfejlesztési arzenáljában.